<template>
  <div class="list-wrapper">
    <v-header :user="userInfo" :createdUser="createdUser"></v-header>
    <div class="list">
      <div class="file-btn">
        <button type="button" class="btn btn-primary" @click="goAddStudent()">创建学生档案</button>
        <button type="button" class="btn btn-info" @click="goSchoolList()">查看院校/专业信息</button>
      </div>
      <table class="table table-bordered" v-show="fileLists.length>0">
        <thead>
        <tr>
          <th>编号</th>
          <th>学生姓名</th>
          <th>性别</th>
          <th>科类</th>
          <th>所在高中</th>
          <th>全校排名</th>
          <th>成绩</th>
          <th>位次</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in fileLists ">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.sex==0?'男':'女'}}</td>
          <td>{{item.major==0?'理科':'文科'}}</td>
          <td>{{item.school}}</td>
          <td>{{item.score}}</td>
          <td>{{item.precedence}}</td>
          <td>{{item.ranking}}</td>
          <td>
            <a class="operating" @click="goAddStudent(item.stuNo)">查看档案</a>
            <a class="operating m-l-15" @click="goPlan(item)">报考方案</a>
          </td>
        </tr>
        </tbody>
      </table>
      <!-- 缺省 -->
      <div class="default-list" v-show="fileLists.length==0">
        <img class="default-img" src="../../common/images/default/no_content.png"/>
        <p>暂无学生档案</p>
      </div>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script type="text/ecmascript-6">
  import header from '../header/header.vue';
  import footer from '../footer/footer.vue';

  export default {
    name: 'studentFileList',
    components: {
      'v-header': header,
      'v-footer': footer
    },
    data() {
      return {
        userInfo: '',
        createdUser: '',
        fileLists: []
      };
    },
    created() {
      this.fetchData();
    },
    methods: {
      /**
       * 获取页面url参数
       */
      fetchData() {
        let username = this.$utils.getUrlKey('username');
        this.userInfo = username;
        this.createdUser = this.$utils.getUrlKey('createdUser');
        this.getFileList();
      },
      /**
       * 获取学生档案列表
       */
      getFileList() {
        console.log("获取学生档案列表");
        let self = this;
        let params = new URLSearchParams();
        params.append('userId', self.createdUser);
        self.$http.post(this.HOST + 'mendao/getStudent', params).then((response) => {
          if (response.data.code == 1) {
            self.fileLists = response.data.list;
          }
        }, (response) => {
          console.log('数据请求失败');
        });
      },
      /**
       * 跳转添加学生档案
       * @param: stuId 学生id
       */
      goAddStudent(stuId) {
        this.$router.push({
          path: '/addStudentFile', query: {
            username: this.userInfo,
            createdUser: this.createdUser,
            stuNo: stuId
          }
        });
      },
      /**
       * 跳转学生报考方案
       */
      goPlan(item) {
        if (item.isScheme == 1) { // 有方案
          this.$router.push({
            path: '/studentPlan', query: {
              username: this.userInfo,
              createdUser: this.createdUser,
              stuNo: item.stuNo
            }
          });
        } else {
          this.$router.push({ // 没有方案
            path: '/planSelection', query: {
              username: this.userInfo,
              createdUser: this.createdUser,
              stuNo: item.stuNo
            }
          });
        }

      },
      /**
       * 跳转查看数据页面
       */
      goSchoolList() {
        this.$router.push({
          path: '/schoolInfo', query: {
            username: this.userInfo,
            createdUser: this.createdUser
          }
        });
      },
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .list-wrapper
    width: 100%
    min-height: 100vh

  .list
    width: 1200px
    margin: 0 auto
    min-height: 100vh
    padding-top: 45px
    .file-btn
      width: 100%
      padding: 30px 0
    .m-l-15
      margin-left: 15px !important
    .operating
      margin: 0 auto
      color: #222
      cursor: pointer
      &:hover
        color: #E65A1E
    .default-list
      width: 100%
      min-height: 600px
      padding-top: 100px
      text-align: center
      .default-img
        display: block
        width: 200px
        height: auto
        margin: 0 auto
      p
        color: #999

</style>
